<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>盒子模型</title>
		<style>
			/* margin（外边距）属性 */
			img{
				border: 1px solid red;
				/* margin-left: 600px;
				margin-top: 200px; */
				/* 一个属性值 顺时针：上 右 下 左 */
				margin: 200px;
				/* margin:两个属性值 顺时针：上下   右左 */
				margin: 200px 600px ;
				/* margin:三个属性值 顺时针：上  右左  下 */
				 margin: 100px 200px 300px;
				/* margin:四个属性值 顺时针：上 右 下 左*/
				margin: 100px 200px 300px 400px;
				/* 常用：盒子自适应剧中 */
				 
			}
			div{
				width: 100px;
				height: 100px;
				background: red;
				/* 
				   块元素可以设置高宽、可以用外边距居中、可以左右并且上下移动
				*/
				margin: 0 auto;
			}
			span{
				/* 行内元素：不可以设置高宽【高---不可以动上下】、不可以设置外边距居中、在一行显示【可以左右移动】 */
				/* 文本用：text-align：center居中 */
				/* 行元素可以套一个div（块元素），从而可以使用外边距居中 */
				 text-align:center; 
			}
		</style>
	</head>
	<body>
		<div></div>
		<!--框模型、盒子模型：四个部分组成：
		                    外边距：边框以外四周，叫做外边距
							margin属性
							边框：
							填充（内边距）：边框和内容之间的距离，叫做内边距
							内容：块、行、行内块元素本身宽高
		，所有元素存在于框模型当中  -->
		<img src="img/CSGO图标_爱给网_aigei_com.jpg" alt="csgo" width="300px" height="300px" />
		<span>圣诞</span>
	</body>
</html>